/* ==========================================================
   Outcomes Page 2 - Section 5: Call to Action
   File: wwwroot/css/outcome2-cta.css
   Used by: Views/Partials/blocklist/Components/outcomeTwoCtaBlock.cshtml
   Fluid layout: same scaling as the other Outcome blocks
   (6.8vw gutter, vw sizes with clamp() minimums/maximums).
   ========================================================== */
.oc2-cta {
  --cta-navy: #1b2a5b;
  --cta-orange: #ff9a45;
  --cta-orange-dark: #f5862a;
  --cta-bg: #fdf3ec;
  --cta-gutter: 6.8vw;
  --cta-ease: cubic-bezier(.16, 1, .3, 1);

  box-sizing: border-box;
  width: 100%;
  background: var(--cta-bg);
  padding: clamp(48px, 5.4vw, 140px) var(--cta-gutter) clamp(48px, 4.4vw, 114px);
  font-family: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--cta-navy);
  -webkit-font-smoothing: antialiased;
}
.oc2-cta *, .oc2-cta *::before, .oc2-cta *::after { box-sizing: border-box; margin: 0; padding: 0; }

.oc2-cta__heading {
  max-width: 76vw;
  margin-bottom: clamp(14px, 1.3vw, 34px);
  font-size: clamp(24px, 2.08vw, 54px);
  font-weight: 600;
  line-height: 1.3;
  color: var(--cta-navy);
}

.oc2-cta__text {
  max-width: 74vw;
  margin-bottom: clamp(20px, 1.6vw, 42px);
  font-family: "DM Sans", "Poppins", sans-serif;
  font-size: clamp(14px, 1.02vw, 26px);
  line-height: 1.6;
  color: var(--cta-navy);
}

/* ---------- Button ---------- */
.oc2-cta__btn {
  display: inline-flex;
  align-items: center;
  gap: clamp(14px, 1.4vw, 36px);
  min-height: 44px;
  padding: clamp(12px, 1vw, 26px) clamp(18px, 1.5vw, 40px);
  background: var(--cta-orange);
  color: #fff;
  font-size: clamp(13px, .93vw, 24px);
  font-weight: 600;
  line-height: 1.3;
  text-decoration: none;
  border: 0;
  cursor: pointer;
  transition: background-color .3s ease, transform .4s var(--cta-ease), box-shadow .4s var(--cta-ease);
}
.oc2-cta__btn:hover,
.oc2-cta__btn:focus-visible {
  background: var(--cta-orange-dark);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 12px 24px -12px rgba(245, 134, 42, .7);
}
.oc2-cta__btn:focus-visible { outline: 2px solid var(--cta-navy); outline-offset: 3px; }
.oc2-cta__arrow {
  width: 1.1em;
  height: 1.1em;
  flex: none;
  transition: transform .4s var(--cta-ease);
}
.oc2-cta__btn:hover .oc2-cta__arrow,
.oc2-cta__btn:focus-visible .oc2-cta__arrow { transform: translateX(5px); }

/* ---------- Fade-up on scroll (only when JS has run) ---------- */
.oc2-cta.js-reveal .oc2-cta__heading,
.oc2-cta.js-reveal .oc2-cta__text,
.oc2-cta.js-reveal .oc2-cta__btn {
  opacity: 0;
  transform: translateY(24px);
}
.oc2-cta.js-reveal.is-visible .oc2-cta__heading,
.oc2-cta.js-reveal.is-visible .oc2-cta__text,
.oc2-cta.js-reveal.is-visible .oc2-cta__btn {
  opacity: 1;
  transform: none;
  transition: opacity .8s ease, transform 1s var(--cta-ease), background-color .3s ease, box-shadow .4s var(--cta-ease);
}
.oc2-cta.js-reveal.is-visible .oc2-cta__text { transition-delay: .12s; }
.oc2-cta.js-reveal.is-visible .oc2-cta__btn { transition-delay: .24s, .24s, 0s, 0s; }
/* after the entrance, the button hover works normally */
.oc2-cta.js-reveal.is-done .oc2-cta__btn { transition: background-color .3s ease, transform .4s var(--cta-ease), box-shadow .4s var(--cta-ease); }
.oc2-cta.js-reveal.is-done .oc2-cta__btn:hover,
.oc2-cta.js-reveal.is-done .oc2-cta__btn:focus-visible { transform: translateY(-2px); }

/* ---------- SMALL LAPTOP / TABLET ---------- */
@media (max-width: 1200px) {
  .oc2-cta { --cta-gutter: 32px; }
  .oc2-cta__heading { max-width: 760px; }
  .oc2-cta__text { max-width: 820px; }
}

/* ---------- TABLET PORTRAIT & MOBILE ---------- */
@media (max-width: 900px) {
  .oc2-cta { --cta-gutter: 24px; padding-top: 56px; padding-bottom: 56px; }
}

@media (max-width: 560px) {
  .oc2-cta { --cta-gutter: 20px; }
  .oc2-cta__heading { font-size: 24px; }
  .oc2-cta__btn { width: 100%; justify-content: space-between; }
}

@media (prefers-reduced-motion: reduce) {
  .oc2-cta.js-reveal .oc2-cta__heading,
  .oc2-cta.js-reveal .oc2-cta__text,
  .oc2-cta.js-reveal .oc2-cta__btn { opacity: 1; transform: none; transition: none; }
}